<template>
  <div class="view-button font-white">
    <div class="main-area">
      <div class="flex">
        <!-- 按近期统计、按日期查看 -->
        <div class="flex">
          <div @click="changeView(0)">
            <img :src="btnOneIndex===0? acBtnAmountIcon : disBtnAmountIcon" alt="" class="width-200 height-40 pointer">
          </div>
          <div class="mar-l-23"  @click="changeView(1)">
            <img :src="btnOneIndex===1? acBtnDateIcon: disBtnDateIcon" alt="" class="width-200 height-40 pointer">
          </div>
        </div>
        <!-- 统计时间段 -->
        <div class="date-btn-box v-align-c mar-l-23">
          <span class="font-w">统计时间段: </span>
          <div @click="changeDate(index)" class="day-btn font-14 flex-center width-76 height-32 mar-l-9 pointer" v-for="(item, index) in btnGroupTwo" :key="index" :class="index === btnTwoIndex ? 'active-btn':'disactive-btn'">
            {{item}}
          </div>
          <!-- 选择时间段 -->
          <div class="date-picker-box" v-if="btnOneIndex && btnTwoIndex !== 'week'">
            <el-date-picker v-model="date" :type="dateType" placeholder="选择日期" @change="sureDate"></el-date-picker>
          </div>
          <div class="date-picker-box" v-else-if="btnOneIndex && btnTwoIndex === 'week'">
            <el-date-picker v-model="weekdate" type="week" placeholder="选择日期" @change="sureDate" format="yyyy 第 WW 周"></el-date-picker>
          </div>
        </div>
      </div>
      <!-- 数据更新时间 -->
      <!-- <div class="update-time-box font-14 v-align-c mar-l-30" v-if="!btnOneIndex && !btnTwoIndex">
        <i class="el-icon-warning"></i>
        <span class="mar-l-7">数据更新于2021-02-24 18时</span>
        <span class="mar-l-13 mar-r-13">|</span>
        <span>每日更新</span>
      </div> -->
      <!-- 数据说明 导出结果 -->
      <div class="v-align-c pointer export-box" v-if="showExcleExport">
        <div v-popover:popover class="data-description">
          <i class="el-icon-question"></i>
          <span>数据说明</span>
        </div>
        <div class="v-align-c export-btn pad-t-4 pad-b-4 pad-l-11 pad-r-11 mar-l-20" @click="exportTable">
          <img :src="excleIcon" class="width-12 height-15" alt="">
          <span class="mar-l-4">导出结果</span>
        </div>
      </div>
    </div>
    <div class="test" style="display:none">
      <el-popover
        placement="top-start"
        title=""
        ref="popover"
        width="200"
        trigger="hover">
        <div v-if="$route.path === '/dataAnalysis/supplier-analysis/index' && sortText==='销售额排名'" class="mar-b-10">
          <div class="font-16 mar-t-4 mar-b-4 font-color" >数据统计规则：</div>
          <div>1.供应商销售额不包含运费</div>
        </div>
        <div class="font-16 mar-t-4 mar-b-4 font-color">商品排序规则：</div>
        <div>1.默认按照{{sortText}}高低至上而下显示。</div>
        <div>2.若选择筛选条件后商品列表按筛选条件和销售额进行联级查询。</div>
      </el-popover>
    </div>
  </div>
</template>

<script>
import acBtnAmountIcon from '@/assets/images/ac-btn-amount.png'
import disBtnAmountIcon from '@/assets/images/dis-btn-amount.png'
import acBtnDateIcon from '@/assets/images/ac-btn-date.png'
import disBtnDateIcon from '@/assets/images/dis-btn-date.png'
import excleIcon from '@/assets/images/excle.png'
export default {
  data() {
    return {
      btnGroupOne: [{ title: '按近期统计查看' }, { title: '按日期查看' }],
      btnOneIndex: 0,
      btnGroupTwo: {},
      btnTwoIndex: '',
      date: '',
      weekdate: '',
      dateType: 'date', // 按日查询date  按周查询week
      startTime: '',
      endTime: '',
      acBtnAmountIcon,
      disBtnAmountIcon,
      acBtnDateIcon,
      disBtnDateIcon,
      excleIcon
    }
  },
  props: {
    showExcleExport: {
      type: Boolean,
      default: true
    },
    week: {
      type: Boolean,
      default: false
    },
    today: {
      type: Boolean,
      default: false
    },
    sortText: {
      type: String,
      default: ''
    }
  },
  mounted() {
    this.resetComditions()
    this.btnTwoIndex = this.today ? 'ten' : 'date'
    this.btnGroupTwo = this.today ? { ten: '累计至今', week: '近7天', month: '近30天' } : { date: `${new Date().getMonth() + 1}月${new Date().getDate()}日`, week: '近7天', month: '近30天' }
  },
  methods: {
    changeView(index) {
      this.date = ''
      this.btnOneIndex = index
      if (index) {
        this.btnTwoIndex = 'date'
        this.btnGroupTwo = this.week ? { date: '按日', week: '按周', month: '按月', year: '按年' } : { date: '按日', month: '按月', year: '按年' }
      } else {
        this.btnTwoIndex = this.today ? 'ten' : 'date'
        this.btnGroupTwo = this.today ? { ten: '累计至今', week: '近7天', month: '近30天' } : { date: `${new Date().getMonth() + 1}月${new Date().getDate()}日`, week: '近7天', month: '近30天' }
      }
      if (!index) {
        this.startTime = ('ten' in this.btnGroupTwo) ? '' : `${this.$utils.formatTimeToDate(new Date(), 'yyyy-MM-dd')} 00:00:00`
        this.endTime = ('ten' in this.btnGroupTwo) ? '' : `${this.$utils.formatTimeToDate(new Date(), 'yyyy-MM-dd')} 23:59:59`
        this.$emit('changeDate', this.startTime, this.endTime)
      }
    },
    changeDate(index) {
      this.btnTwoIndex = index
      if (this.btnOneIndex) {
        this.date = ''
        this.weekdate = ''
        this.dateType = index
      } else {
        switch (index) {
          case 'date':
            this.startTime = `${this.$utils.formatTimeToDate(new Date(), 'yyyy-MM-dd')} 00:00:00`
            this.endTime = `${this.$utils.formatTimeToDate(new Date(), 'yyyy-MM-dd')} 23:59:59`
            break
          case 'ten':
            // this.startTime = `${this.$utils.formatTimeToDate(new Date().setDate(new Date().getDate() - 10), 'yyyy-MM-dd')} 00:00:00`
            // this.endTime = `${this.$utils.formatTimeToDate(new Date().setDate(new Date().getDate()), 'yyyy-MM-dd')} 23:59:59`
            this.startTime = ''
            this.endTime = ''
            break
          case 'week':
            this.startTime = `${this.$utils.formatTimeToDate(new Date().setDate(new Date().getDate() - 7), 'yyyy-MM-dd')} 00:00:00`
            this.endTime = `${this.$utils.formatTimeToDate(new Date().setDate(new Date().getDate() - 1), 'yyyy-MM-dd')} 23:59:59`
            break
          case 'month':
            this.startTime = `${this.$utils.formatTimeToDate(new Date().setDate(new Date().getDate() - 30), 'yyyy-MM-dd')} 00:00:00`
            this.endTime = `${this.$utils.formatTimeToDate(new Date().setDate(new Date().getDate() - 1), 'yyyy-MM-dd')} 23:59:59`
            break
        }
        this.$emit('changeDate', this.startTime, this.endTime)
      }
    },
    sureDate() {
      switch (this.btnTwoIndex) {
        case 'date':
          this.startTime = `${this.$utils.formatTimeToDate(this.date, 'yyyy-MM-dd')} 00:00:00`
          this.endTime = `${this.$utils.formatTimeToDate(this.date, 'yyyy-MM-dd')} 23:59:59`
          break
        case 'week':
          this.startTime = `${this.getDay(-1, this.weekDate())} 00:00:00`
          this.endTime = `${this.getDay(6, this.weekDate())} 23:59:59`
          break
        case 'month':
          this.startTime = `${this.getCurDay(this.date).firstDayOfCurMonth} 00:00:00`
          this.endTime = `${this.getCurDay(this.date).lastDayOfCurMonth} 23:59:59`
          break
        case 'year':
          this.startTime = `${this.date.getFullYear()}-01-01 00:00:00`
          this.endTime = `${this.date.getFullYear()}-12-31 23:59:59`
          break
      }
      this.$emit('changeDate', this.startTime, this.endTime)
    },
    weekDate() {
      return this.weekdate
    },
    // 重置赛选条件
    resetComditions() {
      this.$bus.$on('resetComditions', () => {
        this.btnOneIndex = 0
        this.btnTwoIndex = this.today ? 'ten' : 'date'
        this.date = ''
        this.weekdate = ''
        this.dateType = 'date'
        this.btnGroupTwo = this.today ? { ten: '累计至今', week: '近7天', month: '近30天' } : { date: `${new Date().getMonth() + 1}月${new Date().getDate()}日`, week: '近7天', month: '近30天' }
      })
    },
    // 本月第一天和最后一天日期
    getCurDay(date) {
      const nowdays = date
      const year = nowdays.getFullYear()
      let month = nowdays.getMonth() + 1
      month = month > 9 ? month : '0' + month
      const firstDayOfCurMonth = `${year}-${month}-01`
      const lastDay = new Date(year, month, 0)
      const lastDayOfCurMonth = `${year}-${month}-${lastDay.getDate()}`
      return { firstDayOfCurMonth, lastDayOfCurMonth }
    },
    // 获取指定日期
    getDay(day, time) {
      var today = time
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
      today.setTime(targetday_milliseconds)
      var tYear = today.getFullYear()
      var tMonth = today.getMonth()
      var tDate = today.getDate()
      tMonth = this.doHandleMonth(tMonth + 1)
      tDate = this.doHandleMonth(tDate)
      return tYear + '-' + tMonth + '-' + tDate
    },
    doHandleMonth(month) {
      var m = month
      if (month.toString().length === 1) {
        m = '0' + month
      }
      return m
    },
    exportTable() {
      this.$emit('exportExcle', true)
    }
  }
}
</script> 

<style rel="stylesheet/scss" lang="scss" scoped>
@media screen and (min-width:1538px) {
  .main-area {
    display: flex;
    margin-bottom: 29px;
    .export-box {
      margin-left: auto;
    }
  }
}
@media screen and (max-width:1537px) {
  .main-area {
    display: flex;
    flex-direction: column;
    .export-box {
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }
}
  .view-button {
    .pointer:hover{
      cursor:pointer
     }
    .recent-view-btn {
      background:linear-gradient(to bottom left,#069EFF 50%,#0A89FF 50%);
    }
    .date-view-btn {
      background:linear-gradient(to bottom left, #444449 50%,#3A3A3E 50%);
    }
    .date-btn-box {
      &>span {
        color:rgba(255,255,255,0.5);
      }
      .active-btn {
        background: #0A89FF;
      }
      .disactive-btn {
        background: #2B2B2E;
        border: 1px solid rgba(255,255,255,0.5);
      }
      .date-picker-box {
        margin-left: 42px;
        /deep/ .el-date-editor.el-input {
          // width: 144px;
        }
        /deep/ .el-input__inner {
          height: 32px;
          line-height: 32px;
          // width: 144px;
          border-radius: 0px;
          background-color: #2B2B2E;
          border: 1px solid rgba(255,255,255,0.5);
          color: #fff;
        }
        /deep/ .el-input__prefix, .el-input__suffix {
          top: -3px;
        }
        /deep/ .el-picker-panel {
          position: absolute;
          z-index: 1;
        }
      }
    }
    .update-time-box {
      color:rgba(255,255,255,0.5);
    }
    .export-btn {
      border: 1px solid #00FFC6;
      color: #00FFC6;
    }
    .data-description {
      color: rgba(255,255,255,0.5);
    }
  }
</style>